<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="" prop="propertyType">
        <el-select filterable clearable style="width: 140px" v-model="queryParams.propertyType" placeholder="属性类型">
          <el-option v-for="dict in propertyTypeobj" :label="dict.propertyType" :value="dict.propertyType"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="congzhiQuery">重置</el-button>
        <el-button @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="propertyList" height="62vh" :span-method="objectSpanMethod">
      <el-table-column type="index" label="序号" />
      <el-table-column label="属性类型" prop="propertyType" />
      <el-table-column label="属性编号" prop="propertyCode" />
      <el-table-column label="属性名称" prop="propertyName" />
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="状态" prop="hasDelete">
        <template #default="scope">
          <!-- {{ scope.row.hasDelete == 1 ? "禁用" : "启用" }} -->
          <el-switch
            v-model="scope.row.hasDelete"
            class="ml-2"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            :active-value="0"
            :inactive-value="1"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            @change="changeUpdate(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <!-- <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改基础数据-属性维护数据对话框 -->
    <el-dialog :title="title" v-model="open" width="650px" append-to-body draggable top="25vh">
      <el-form ref="form" :model="forma" :rules="rules" label-width="100px" :inline="true">
        <el-form-item label="属性类型" prop="propertyType">
          <el-select filterable clearable style="width: 180px" v-model="forma.propertyType" placeholder="请选择" :disabled="propertyTypedisabled">
            <el-option v-for="dict in propertyTypeListarr" :label="dict.propertyType" :value="dict.propertyType"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""><div style="width: 180px; height: 90px"></div></el-form-item>
        <el-form-item label="属性编号" prop="propertyCode">
          <el-input style="width: 180px" v-model="forma.propertyCode" placeholder="请输入属性编号" :disabled="propertyTypedisabled" />
        </el-form-item>
        <el-form-item label="属性名称" prop="propertyName">
          <el-input style="width: 180px" v-model="forma.propertyName" placeholder="请输入属性名称" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input style="width: 180px" v-model="forma.sort" type="number" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="状态" prop="hasDelete">
          <el-radio-group v-model="forma.hasDelete" class="ml-4">
            <el-radio :label="0" size="large">启用</el-radio>
            <el-radio :label="1" size="large">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="attribute">
import { insertManBasicPropertyapi, selectManBasicPropertyListapi, editManBasicPropertyapi, selectPropertyTypeListapi } from "@/api/main/api.js";
import { reactive, ref, toRefs } from "vue";
defineExpose({ getList });
const emit = defineEmits(["parentCount"]);
const { proxy } = getCurrentInstance();
const loading = ref(true);
const title = ref("属性维护新增");
const open = ref(false);
const objprops = ref(1);
const propertyTypedisabled = ref(false);
const data = reactive({
  // 基础数据-单位数据表格数据
  propertyList: [],
  // 查询参数
  queryParams: {
    pageNum: "1",
    pageSize: "10",
    propertyType: "",
  },
  // 表单参数
  forma: {},
  // 表单校验
  rules: {
    propertyType: [{ required: true, message: "属性类型不能为空", trigger: ["blur", "change"] }],
    propertyCode: [{ required: true, message: "属性编号不能为空", trigger: ["blur", "change"] }],
    propertyName: [{ required: true, message: "属性名称不能为空", trigger: ["blur", "change"] }],
    sort: [{ required: true, message: "排序不能为空", trigger: ["blur", "change"] }],
    hasDelete: [{ required: true, message: "状态不能为空", trigger: ["blur", "change"] }],
  },
  editobj: {},
  tableobj: {},
  propertyTypeobj: [],
  propertyTypeListarr: [],
});
const { propertyTypeListarr, propertyTypeobj, tableobj, queryParams, forma, rules, propertyList, editobj } = toRefs(data);

/** 查询基础数据-单位数据列表 */
const pageNumparent = ref(undefined);
const pageSizeparent = ref(undefined);
/** 查询列表 */
function getList(pageNum, pageSize) {
  loading.value = true;
  if (pageNum != undefined || pageSize != undefined) {
    pageNumparent.value = pageNum;
    pageSizeparent.value = pageSize;
    queryParams.value.pageNum = pageNum == undefined ? 1 : pageNum;
    queryParams.value.pageSize = pageSize == undefined ? 10 : pageSize;
  } else {
    queryParams.value.pageNum = pageNumparent.value == undefined ? "1" : pageNumparent.value;
    queryParams.value.pageSize = pageSizeparent.value == undefined ? "10" : pageSizeparent.value;
  }
  selectManBasicPropertyListapi(queryParams.value).then((res) => {
    if (res.code == 200) {
      tableobj.value = {};
      const objarr = [];
      propertyTypeobj.value = [];
      for (let i = 0; i < res.data.length; i++) {
        const element = res.data[i].propertyType;
        if (tableobj.value[element] == undefined) {
          tableobj.value[element] = 0;
          objarr.push(res.data[i]);
          propertyTypeobj.value.push(res.data[i]);
        }
      }
      const objarr1 = [];
      for (let i = 0; i < objarr.length; i++) {
        res.data.forEach((item) => {
          if (item.propertyType == objarr[i].propertyType) {
            objarr1.push(item);
          }
        });
      }
      const obj1 = {};
      const objarr2 = [];
      for (let i = 0; i < objarr1.length; i++) {
        const element = objarr1[i].id;
        if (obj1[element] == undefined) {
          obj1[element] = true;
          objarr1[i].numcon = 0;
          objarr2.push(objarr1[i]);
        }
      }
      let yiyangkey = "";
      for (const key in tableobj.value) {
        for (let i = 0; i < objarr2.length; i++) {
          if (key == objarr2[i].propertyType) {
            //先统计每个名称有几个

            tableobj.value[key] = tableobj.value[key] + 1;
            if (i != objarr2.length - 1) {
              yiyangkey = objarr2[i + 1].propertyType;
            }
            if (yiyangkey != objarr2[i].propertyType) {
              // 在每个名称结束的时候给上一个统计
              objarr2[i - tableobj.value[key] + 1].numcon = tableobj.value[key];
            } else if (yiyangkey == objarr2[objarr2.length - 1].propertyType) {
              //判断是最后一个的话直接给他赋值
              objarr2[i - tableobj.value[key] + 1].numcon = tableobj.value[key];
            }
          }
        }
      }
      propertyList.value = objarr2;
      console.log(objarr2);
      loading.value = false;
      emit("parentCount", res.count);
    }
  });
}
getList();
function getList1() {
  selectPropertyTypeListapi().then((res) => {
    propertyTypeListarr.value = res.data;
  });
}
getList1();

// 取消按钮
function cancel() {
  open.value = false;
}
/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
function congzhiQuery() {
  // 查询参数
  queryParams.value = {
    propertyType: "",
  };
  getList();
}
/** 新增按钮操作 */
function handleAdd() {
  propertyTypedisabled.value = false;
  open.value = true;
  forma.value = {
    propertyType: "",
    propertyCode: "",
    propertyName: "",
    sort: "",
    hasDelete: "",
    createTime: "",
  };
  title.value = "属性维护新增";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  console.log(row);
  propertyTypedisabled.value = true;
  title.value = "属性维护修改";
  editobj.value = JSON.parse(JSON.stringify(row));
  forma.value = JSON.parse(JSON.stringify(row));
  open.value = true;
}
//
function objectSpanMethod(rowprops) {
  if (rowprops.columnIndex === 1) {
    // console.log(rowprops.row.propertyType);
    return {
      rowspan: rowprops.row.numcon,
      colspan: 1,
    };
  }
  if (rowprops.columnIndex === 0) {
    // console.log(rowprops.row.propertyType);
    return {
      rowspan: rowprops.row.numcon,
      colspan: 1,
    };
  }
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["form"].validate((valid) => {
    if (valid) {
      if (forma.value.id != null) {
        const newforma = JSON.parse(JSON.stringify(forma.value));
        for (const key in editobj.value) {
          for (const keya in newforma) {
            if (key == keya && editobj.value[key] == newforma[keya] && key != "id") {
              Reflect.deleteProperty(newforma, keya);
              Reflect.deleteProperty(newforma, "params");
            }
          }
        }
        if (Object.keys(newforma).length <= 1) {
          open.value = false;
        } else {
          editManBasicPropertyapi(newforma).then((res) => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        }
      } else {
        console.log(forma.value);
        insertManBasicPropertyapi(forma.value).then((res) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
function changeUpdate(row) {
  forma.value = JSON.parse(JSON.stringify(row));
  editManBasicPropertyapi({ hasDelete: forma.value.hasDelete, id: row.id }).then((res) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getList();
  });
}
</script>
